<template>
  <div class="buttombox">
      <ul>
        <router-link tag="li" to="/recommend">
          <span class="iconfont icon-shucheng"></span>
          <p>书城</p>  
        </router-link>

        <router-link tag="li" to="/classify">
          <span class="iconfont icon-sort"></span>
          <p>分类</p>
        </router-link>

        <router-link tag="li" to="/free">
          <span class="iconfont icon-fuli"></span>
          <p>免费</p>
        </router-link>

        <router-link tag="li" to="/bookshelf">
          <span class="iconfont icon-shujia"></span>
          <p>书架</p>
        </router-link>

        <router-link tag="li" to="/my">
          <span class="iconfont icon-wode"></span>
          <p>我的</p>
        </router-link>
      </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.buttombox {
  width: 100%;
  height: 55px;
  // border: 0.1px solid black;
  border-top: 1px solid gainsboro;
  background: white;
  bottom: 0px;
  left: 0px;
  position: fixed;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      color: black;
      text-align: center;
      span {
        font-size: 28px;
        line-height: 35px;
      }
      p {
        font-size: 15px;
      }
    }
  }
}
</style>